import { defineStore } from "pinia";
import { switchTab } from "@/router";

/**
 * TabBarType 接口
 * 定义 TabBar 的结构类型
 * @property {string} name - 标签名称
 * @property {string} icon - 默认图标路径
 * @property {string} icon_active - 激活状态图标路径
 * @property {string} path - 跳转路径
 */
export type TabBarType = {
    name: string;
    icon: string;
    icon_active: string;
    path: string;
};

/**
 * SystemBarsType 接口
 * 定义系统 TabBar 状态管理的结构类型
 * @property {string} current - 当前激活的 Tab 路径
 * @property {TabBarType[]} list - Tab 列表数据
 */
type SystemBarsType = {
    current: string;
    list: TabBarType[];
};

/**
 * useTabBarStore 函数
 * 使用 Pinia 定义一个名为 tabBar 的状态管理 store，用于管理系统底部导航栏的状态
 * 包括当前选中的 tab、tab 列表以及相关操作方法
 */
export const useTabBarStore = defineStore("tabBar", {
    state: (): SystemBarsType => {
        // 获取当前页面路由作为默认激活 tab，若获取失败则使用默认首页路径
        const current = getCurrentPages()[0].route ?? "packages/index/index";

        return {
            current: `/${current}`,
            list: [
                {
                    name: "养宠",
                    icon: "/static/images/menus/index.svg",
                    icon_active: "/static/images/menus/index-active.svg",
                    path: "/packages/index/index"
                },
                {
                    name: "社区",
                    icon: "/static/images/menus/community.svg",
                    icon_active: "/static/images/menus/community-active.svg",
                    path: "/packages/community/index"
                },
                {
                    name: "问诊",
                    icon: "/static/images/menus/diagnosis.svg",
                    icon_active: "/static/images/menus/diagnosis-active.svg",
                    path: "/packages/diagnosis/index"
                },
                {
                    name: "我的",
                    icon: "/static/images/menus/my.svg",
                    icon_active: "/static/images/menus/my-active.svg",
                    path: "/packages/account/index"
                }
            ]
        };
    },
    getters: {
        /**
         * getTabBarList getter
         * 获取 TabBar 列表数据
         * @param state - 当前状态对象
         * @returns TabBarType[] - 返回 TabBar 数据列表
         */
        getTabBarList(state): TabBarType[] {
            return state.list;
        },

        /**
         * currentTabBarIndex getter
         * 获取当前激活 Tab 在列表中的索引位置
         * @param state - 当前状态对象
         * @returns number - 返回当前激活 Tab 的索引，未找到返回 -1
         */
        currentTabBarIndex(state) {
            return state.list.findIndex((o: TabBarType) => {
                return o.path === `${state.current}`;
            });
        }
    },
    actions: {
        /**
         * setCurrentTabBar action
         * 设置当前激活的 Tab，并跳转到对应页面
         * @param payload - 需要设置为当前 Tab 的 TabBar 对象
         */
        setCurrentTabBar(payload: TabBarType) {
            this.current = payload.path;
            switchTab({
                url: payload.path
            });
        }
    }
});
